Efecto de agua en SVG en una imagen

04 January 2022
SVG,
IMG,
Filter

<style>img {width: 110vw;height: 110vh;position: absolute;top: -5vh;left: -5vw;-o-object-fit: cover;object-fit: cover;filter: url(#water);}
  body {overflow: hidden;}
</style>

<svg width="0" height="0"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="7" in="SourceGraphic" in2="noise2" />
  </filter>
</svg>

<img src="https://ucarecdn.com/74addbfd-2932-41c6-a0a9-5ab368677451/-/resize/1000x/" alt="Hawaiian water crashes against the rocks">

Hawaiian water crashes against the rocks
Resultado

View on Instagram View on Flickr View on Twitter